<template>
  <div class="center">
    <nut-row @click="handleToShowUserInfo">
      <nut-col :span="24">
        <div class="flex-content">
          <nut-row>
            <nut-col :span="7">
              <div class="flex-content">
                <img class="userHead" :src="$store.state.user.userHead"/>
              </div>
            </nut-col>
            <nut-col :span="17">
              <div class="flex-content head-info">
                <div v-if="$store.state.user.isAdmin">
                  <div>
                    <b class="user-name">{{ $store.state.user.name }}</b>
                    <!--                    <router-link to="/mine/admin">进入管理后台</router-link>-->
                  </div>
                </div>
                <div v-else>
                  <div>
                    <b class="user-name">{{ $store.state.user.name }}</b>
                  </div>
                </div>

              </div>
            </nut-col>

          </nut-row>
        </div>
      </nut-col>
    </nut-row>

    <nut-cell title="我的订单" desc="全部订单" is-link="true"></nut-cell>
    <nut-cell title="待付款" desc="1" is-link="true"></nut-cell>
    <nut-cell title="待使用" desc="10" is-link="true"></nut-cell>
    <nut-cell title="待评价" desc="12" is-link="true"></nut-cell>


    <nut-row class="logout-content">
      <nut-col :span="24">
        <div class="flex-content" style="padding:10px">
          <nut-button class="logout-button" type="warning" color="#e54847" @click="handleToLogout">退出登录</nut-button>
        </div>
      </nut-col>
    </nut-row>

  </div>
</template>

<script>
// import {isRef,getCurrentInstance,reactive,ref} from 'vue';
// import {Toast} from '@nutui/nutui';
import axios from "axios";


export default {
  name: "center",
  data() {
    return {}
  },
  setup() {

  },
  beforeRouteEnter(to, from, next) { //导航守卫
    axios.get('/api2/users/getUser').then((res) => {
      const status = res.data.status;
      if (status === 0) {
        next(vm => {
          window.localStorage.setItem('name', res.data.data.username);
          window.localStorage.setItem('isAdmin', res.data.data.isAdmin);
          vm.$store.commit('user/USER_NAME', {
            name: res.data.data.username,
            isAdmin: res.data.data.isAdmin,
            userHead: res.data.data.userHead
          });
        });
      } else {
        next('/mine/login');
      }
    });
  },
  methods: {
    handleToLogout() {
      this.$axios.get('/api2/users/logout').then((res) => {
        const status = res.data.status;
        if (status === 0) {
          window.localStorage.removeItem('name');
          window.localStorage.removeItem('isAdmin');
          this.$store.commit('user/USER_NAME', {
            name: '',
            isAdmin: false,
            userHead: ''
          })
          this.$router.push('/mine/login');
        }
      });
    },
    /*handleToUpload(ev) {
      const file = ev.target.files[0];
      const param = new FormData();
      param.append('file', file, file.name);
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      };
      this.$axios.post('/api2/users/uploadUserHead', param, config).then((res) => {
        const status = res.data.status;
        const This = this;
        if (status === 0) {
          Toast.success('上传头像成功');
          This.$store.commit('user/USER_NAME', {
            name: This.$store.state.user.name,
            isAdmin: This.$store.state.user.isAdmin,
            userHead: res.data.data.userHead + '?' + Math.random()
          });
        } else {
          Toast.fail("上传头像失败");
        }
      });
    },*/
    handleToShowUserInfo() {
      this.$router.push('/mine/userInfo');
      // console.log(111)
    },
  },

}
</script>

<style scoped>
.center {
  height: 100%;
}

.userHead {
  margin: 10px auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.logout-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

.logout-content .logout-button {
  width: 100%;
}

.head-info {
  text-align: left;
  line-height: 70px;
}

.head-info .user-name {
  font-size: 22px;
}


</style>